<template>
  <basic-card
    :title="$t('menu.monitor_grouping')"
    :iconClass="'iconfont icon-shexiangtou'">

    <div class="grouping-container">
      <el-row :gutter="20" style="margin-top: 30px">
        <el-col :span="5">
          <el-card>
            <div slot="header" class="clearfix">
              <span>区域</span>
            </div>
            <div class="group-tree">
              <el-tree :data="tree"></el-tree>
            </div>
          </el-card>
        </el-col>

        <el-col :span="19">
          <el-card>
            <div class="monitor-list">
              <basic-table
                :pageMethod="$mainApi.areaApi.getByPage"
                :tableForm="tableForm"
              >
                <template #table-top="basicTable">
                  <el-form ref="form" :inline="true" size="small" class="text-right">
                    <el-form-item>
                      <el-input
                        v-model="tableForm.search"
                        @change="basicTable.table.refresh"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="basicTable.table.refresh">
                          {{$t("botton.search")}}
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="pushArea" style="padding: 9px;"><i class="el-icon-plus"></i></el-button>
                    </el-form-item>
                    <el-form-item>
                      <little-delete :disabled="basicTable.table.selectRows < 1" :message="$t('message.delete_rows_ask')" :delete-method="() => deleteArea(basicTable.table.selectRows)" @delete="basicTable.table.refresh" />
                    </el-form-item>
                    <el-form-item>
                      <el-button @click="initTableForm" style="padding: 9px;"><i class="el-icon-refresh-left"></i></el-button>
                    </el-form-item>

                  </el-form>
                </template>


                <template #table-column="basicTable">
                  <el-table-column type="selection" width="55"></el-table-column>

                  <el-table-column prop="name" :label="$t('monitor.areaName')"></el-table-column>
                  <el-table-column prop="parentId" :label="$t('monitor.areaParentId')" >
                    <template slot-scope="scope">
                      <span v-if="scope.row.parentArea === null">无</span>
                      <span v-else>{{ scope.row.parentArea.name }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column :label="$t('common.action')" align="center" width="80">
                    <template #default="scope">
                      <edit-delete :message="$t('message.delete_ask')" :edit-method="() => deleteArea([scope.row])" @delete="basicTable.table.refresh" />
                    </template>
                  </el-table-column>
                </template>

                <template #others-elements="basicTable">
                  <area-form-dialop ref="AreaFormDialop" @submit="basicTable.table.refresh" />
                </template>
              </basic-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </basic-card>
</template>
<script>
import Vue from "vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import LittleDelete from "@/components/Basic/Table/littleDelete.vue";
import EditText from "@/components/Edits/text.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import AreaFormDialop from "./components/areaFormDialop.vue";

export default Vue.extend({
  components: { BasicCard, BasicTable, BasicDeleteDialop,LittleDelete,AreaFormDialop },
  data() {
    return {
      tableForm: {
        name: "",
        parentId: "",
      },
      // groupTree: [
      //   {
      //     label: "一级 1",
      //     children: [
      //       {
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             label: "三级 1-1-1",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     label: "一级 2",
      //     children: [
      //       {
      //         label: "二级 2-1",
      //         children: [
      //           {
      //             label: "三级 2-1-1",
      //           },
      //         ],
      //       },
      //       {
      //         label: "二级 2-2",
      //         children: [
      //           {
      //             label: "三级 2-2-1",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      //   {
      //     label: "一级 3",
      //     children: [
      //       {
      //         label: "二级 3-1",
      //         children: [
      //           {
      //             label: "三级 3-1-1",
      //           },
      //         ],
      //       },
      //       {
      //         label: "二级 3-2",
      //         children: [
      //           {
      //             label: "三级 3-2-1",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      treeData: [],
    };
  },
  computed: {
    tree() {
      return this.treeData.map(item => ({
        label: item.name,
        value: item.id,
        children: item.subList.length === 0 ? [] : item.subList.map(item1 => ({
          label: item1.name,
          value: item1.id,
          children: item1.subList.length === 0 ? [] : item1.subList.map(item2 => ({
            label: item2.name,
            value: item2.id,
            children: item2.subList.length === 0 ? [] : item2.subList.map(item3 => ({
              label: item3.name,
              value: item3.id,
            }))
          }))
        }))
      }))
    }
  },
  mounted() {
    this.reqTreeData()
  },
  methods: {
    deleteArea(rows) {
      const allPromise = [];
      rows.forEach((row) => {
        allPromise.push(this.$mainApi.areaApi.deleteArea(row.id));
      });
      return Promise.allSettled(allPromise);
    },
    pushArea() {
      this.$refs.AreaFormDialop.init();
    },
    initTableForm() {
      this.tableForm = {
        name: "",
        parentId: "",
      };
    },
    reqTreeData() {
      this.$mainApi.areaApi.getParent()
      .then(resp => {
        let { data } = resp
        console.log(data)
        this.treeData = data
      })
    }
  },
});
</script>
<style lang="scss" scoped>
.grouping-container {
  width: 100%;
  display: flex;

  .group-tree {
    width: 280px;
    flex-shrink: 0;
  }

  .monitor-list {
    flex-grow: 1;
  }
}
</style>
